<template>
  <div>
    <div class="my_page">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in setList" :key="index">
          <div class="my_card flex-column w-100 bg-white shadow">
            <div class="top p-10">
              <div class="">{{ item.deviceCode }}</div>
              <div class="mange center" @click="addItem(1, item)">管理</div>
            </div>
            <div class="d-flex w-100 dashed pt-3 pb-4">
              <div class="w-40 center">
                <img :src="item.devicePic" alt="" class="decive_img"/>
              </div>
              <div class="flex-column w-60 mt-2" @mousemove="getDetail(index)" @mouseleave="getDetail(null)">
                <div class="info">
                  <div class="d-flex">
                    <div class="line"></div>
                    设备状态信息
                  </div>
                  <!-- <div class="omit center" @click.stop="getDetail(index)">...</div> -->
                  <div class="detail" v-show="detailIndex == index">
                    <div class="d-flex" v-for="(iten, indey) in item.paramList" :key="indey">
                      <div class="titile">{{ iten.name }}：</div>
                      <span>{{ iten.value }}</span>
                    </div>
                  </div>
                </div>

                <div class="tab w-100 h-100">
<!--                  <transition name="fade">-->
                    <el-row>
                      <el-col :span="12" v-for="(iten, indey) in item.paramList" :key="indey">
                        <div class="titile">{{ iten.name }}：{{ iten.value }}</div>
                      </el-col>
                    </el-row>
<!--                  </transition>-->
                </div>

              </div>
            </div>
            <el-row class="pl-2 pr-2" :gutter="10">
              <el-col :span="12">
                <div class="d-flex align-items-center">
                  <div class="dot"></div>
                  <div class="titile"> {{ item.deviceName }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="d-flex align-items-center">
                  <div class="dot"></div>
                  <el-tooltip class="item" effect="dark" :content="item.deviceOfRegionSysName" placement="top">
                    <div class="titile">{{ item.deviceOfRegionSysName }}</div>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <el-card class="center" @click.native="addItem(0)" v-permission="'SBKB_ADD'">
            <img src="../../../../assets/img/add.png" alt="" class="my_img"/>
            <div class="text-center">新建</div>
          </el-card>
        </el-col>
      </el-row>
      <div class="pxIcon" v-if="isStart">
        <el-tooltip class="item" effect="dark" content="排序" placement="top-start">
          <el-button type="primary" size="mini" icon="el-icon-sort" @click="openDialogSort"></el-button>
        </el-tooltip>
      </div>
    </div>

    <yc-dialog ref="ycDialog" dialogTitle="排序" :showCenter="false">
      <template #content>
        <div class="dialog-content">
          <el-table border :data="list3" ref="dragTable">
            <el-table-column type="index" label="序号" width="50" align="center"/>
            <el-table-column prop="deviceCode" label="设备编码" align="center"/>
            <el-table-column prop="deviceName" label="设备名称" align="center"/>
          </el-table>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <addDialog ref="addDialog" @refresh="getSet"></addDialog>
  </div>
</template>

<script>
  import addDialog from "./addDialog.vue"
  import ycDialog from "@/components/pageDialog/index"
  import Sortable from "sortablejs"
  import {
    queryMyDeviceList,
    queryDeviceCenterConfig,
    queryDeviceCenterOne,
    updateDeviceCenterSeq
  } from "@/api/settingManagement/kanbanManagement"

  export default {
    components: {
      ycDialog,
      addDialog
    },
    data() {
      return {
        list: [],
        list2: [],
        list3: [],
        setList: [],
        isStart: false,
        // isSuccess: true,
        detailIndex: null
      }
    },
    created() {
    },
    mounted() {
      this.getSet()
    },
    methods: {
      getSet() {
        this.setList = []
        queryDeviceCenterConfig().then(res => {
          this.setList = res.object
          this.isStart = true
          // this.getInfo()
        })
      },

      async getInfo() {
        this.list = []
        // this.isSuccess = false
        for (let i = 0; i < this.setList.length; i++) {
          await queryDeviceCenterOne({
            deviceCode: this.setList[i].deviceCode,
            params: this.setList[i].params
          }).then(res => {
            if (res.object != null) {
              this.$set(this.setList[i], "realData", res.object.realData)
              // this.isSuccess = true
            }
          })
        }
        this.isStart = false
      },

      addItem(type, data) {
        this.$refs.addDialog.type = type
        this.$refs.addDialog.id = data ? data.id : ""
        queryMyDeviceList().then(res => {
          this.$refs.addDialog.options = res.object
          this.$refs.addDialog.deviceVal = data ? data.deviceCode : ""
          this.$refs.addDialog.getList(data ? data.paramList : "")
          this.$refs.addDialog.dialogVisible = true
        })
      },

      getDetail(i) {
        this.detailIndex = i
      },

      openDialogSort() {
        this.list2 = JSON.parse(JSON.stringify(this.setList))
        this.list3 = JSON.parse(JSON.stringify(this.setList))
        this.$refs.ycDialog.dialogVisible = true
        this.$nextTick(() => {
          this.setSort()
        })
      },

      async dialogSave() {
        let arr = this.list2.map(item => {
          return item.deviceCode
        })
        const { message, status } = await updateDeviceCenterSeq({
          data: arr.join("&")
        })
        if (status == 200) {
          this.getSet()
          this.list2 = []
          this.list3 = []
          this.$refs.ycDialog.dialogVisible = false
          this.$message.success(message)
        }
      },

      setSort() {
        const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper tbody")[0]
        this.sortable = Sortable.create(el, {
          ghostClass: "sortable-ghost", // Class name for the drop placeholder,
          setData: function(dataTransfer) {
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
            dataTransfer.setData("Text", "")
          },
          onEnd: evt => {
            const targetRow = this.list2.splice(evt.oldIndex, 1)[0]
            this.list2.splice(evt.newIndex, 0, targetRow)
          }
        })
      }

    }
  }
</script>
<style lang="scss" scoped>
  .pxIcon {
    position: absolute;
    top: 50%;
    right: 0;
  }

  .top {
    // background-color: #dfeffe;
    position: relative;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    background: linear-gradient(to right, #d7ebfd, #e8f4ff);

  }

  .info {
    display: flex;
    height: 20px;
    position: relative;
    justify-content: space-between;
  }

  .my_card {
    height: 270px;
    cursor: pointer;
    border-radius: 12px !important;
  }

  // .my_card:hover {
  //     border: 1px solid #65a0fa;
  // }

  .detail {
    position: absolute;
    top: 20px;
    // left: -100px;
    right: 0;
    width: 380px;
    max-height: 140px;
    overflow-y: auto;
    opacity: 0.95;
    z-index: 199;
    background-color: #f5f5f6;
    border-radius: 8px;
    padding: 18px 18px 8px 18px;
    display: flex;
    flex-wrap: wrap;

    .d-flex {
      margin-right: 20px;
      margin-bottom: 10px;
    }
  }

  .omit {
    color: #3276ff;
    font-size: 28px;
    margin-right: 12px;
    margin-bottom: 32px;
  }

  .mange {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    // font-size: 16px;
    color: #fff;
    background-color: #4c88ff;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
  }

  .d-flex {
    display: flex;
  }


  .my_page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    overflow-y: auto;
    padding: 8px 20px 20px;

    .el-row {
      display: flex;
      flex-flow: row wrap;
    }

    .el-col {
      margin-top: 12px;
    }

    .el-card {
      height: 270px;
      border-radius: 12px;
      cursor: pointer;
      overflow-y: auto;
    }

    .el-card:hover {
      border: 1px solid #65a0fa;
    }

    .el-card ::v-deep .el-card__body {
      padding: 0 !important;
      // overflow: visible !important;
    }
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .my_img {
    height: 60px;
    width: 60px;
  }

  .text-center {
    text-align: center;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .p-3 {
    padding: 12px;
  }

  .decive_img {
    width: 70%;
    object-fit: contain;
    background-color: #e7e7e7;
    border-radius: 8px;
  }

  .w-100 {
    width: 100%;
  }

  .w-50 {
    width: 50%;
  }

  .w-40 {
    width: 40%;
  }

  .w-60 {
    width: 60%;
  }

  .titile {
    // white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    display: block;

    // font-size: 14px;
    // font-weight: 400;
    // min-width: 70px;
  }

  .tab {
    // display: flex;
    // flex-wrap: wrap;
    // align-content: flex-start;
    height: 120px;
    overflow-y: auto;
    // margin: 10px 0 0 0;
  }

  .col_tab {
    height: 80px;
    overflow-y: auto;
  }

  .mb-3 {
    margin-bottom: 12px;
  }

  .mt-3 {
    margin-top: 12px;
  }

  ::-webkit-scrollbar {
    width: 4px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #DDDEE0;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #C7C9CC;
  }

  .text-success {
    color: #17c56a;
  }

  .text-open {
    color: #97a1fd;
  }

  .line {
    width: 4px;
    height: 12px;
    background-color: #3276ff;
    margin-right: 10px;
    border-radius: 4px;
  }

  .dashed {
    border-bottom: 1px dashed #dcdcdc;
  }

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    margin-top: 4px;
    background-color: #d6ecff;
  }

  .p-10 {
    padding: 12px;
  }

  .fade-leave, // 离开前,进入后透明度是1
  .fade-enter-to {
    opacity: 1;
  }

  .fade-leave-active,
  .fade-enter-active {
    transition: all 2s; //过度是2秒
  }

  .fade-leave-to,
  .fade-enter {
    opacity: 0;
  }
</style>
<style>
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }
</style>
